import 'package:flutter/material.dart';

class UserInfoPage extends StatefulWidget {
  const UserInfoPage({super.key});

  @override
  State<UserInfoPage> createState() => _UserInfoPageState();
}

class _UserInfoPageState extends State<UserInfoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          SafeArea(
            child: SingleChildScrollView( // 页面可以上下滑动
              padding: const EdgeInsets.only(bottom: 80.0), // 为底部按钮留出空间
              child: Column(
                children: [
                // 背景图片
                  Container(
                    height: 200.0,
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                      image: AssetImage('images/background.jpg'), // 背景图片
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                // 头像和用户信息
                const Padding(
                    padding: EdgeInsets.all(20.0),
                    child: Row(
                      children: [
                        CircleAvatar(
                          radius: 40.0,
                          backgroundImage: AssetImage('images/avatar.jpg'),
                          backgroundColor: Colors.white,
                        ),
                        SizedBox(width: 15.0),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '陈林', // 昵称
                              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                            ),
                            SizedBox(height: 4),
                            Text(
                              'QQ号: 5120224490 ', // QQ号
                              style: TextStyle(fontSize: 12, color: Colors.grey),
                            ),
                            SizedBox(height: 4),
                            Row(
                              children: [
                                Text(
                                  'QQ等级: ',
                                  style: TextStyle(fontSize: 12, color: Colors.grey),
                                ),
                                Icon(Icons.wb_sunny, color: Colors.orange, size: 18.0), // 太阳图标
                                Icon(Icons.wb_sunny, color: Colors.orange, size: 18.0),
                                Icon(Icons.brightness_3, color: Colors.orange, size: 18.0), // 月亮图标
                                Icon(Icons.brightness_3, color: Colors.orange, size: 18.0),
                                Icon(Icons.brightness_3, color: Colors.orange, size: 18.0),
                                Icon(Icons.star, color: Colors.orange, size: 18.0), // 星星图标
                                Icon(Icons.star, color: Colors.orange, size: 18.0),
                                Icon(Icons.star, color: Colors.orange, size: 18.0),
                              ],
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  const Divider(height: 20, thickness: 1.0),
                  // 基本信息
                  const Padding(
                    padding: EdgeInsets.symmetric(horizontal: 15.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '基本信息',
                          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                        // SizedBox(height: 10),
                        ListTile(
                          title: Text(
                            '女 | 2岁 | 8月17日 狮子座 | 中国政法大学 | 现居巴黎 | 来自巴黎 | 华为公司 | 学生',
                            style: TextStyle(fontSize: 12),
                          ),
                          trailing: Icon(
                            Icons.arrow_forward_ios,
                            size: 18,
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 10),
                  // QQ VIP、企鹅头像、绿钻和黄钻图标
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 20.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        // VIP按钮
                        ElevatedButton(
                          onPressed: () {
                            // 在这里定义VIP按钮点击事件
                          },
                          style: ElevatedButton.styleFrom(
                            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0), backgroundColor: Colors.orangeAccent, // 按钮颜色
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(12.0),
                            ),
                          ),
                          child: const Text(
                            'SVIP',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                        const SizedBox(width: 10.0), // 按钮与绿钻图标之间的间距
                        const Icon(Icons.diamond, color: Colors.green, size: 30.0), // 绿钻图标
                        const Icon(Icons.diamond, color: Colors.amber, size: 30.0), // 黄钻图标
                      ],
                    ),
                  ),
                  // 勋章
                  // const Padding(
                  //   padding: EdgeInsets.symmetric(horizontal: 20.0),
                  //   child: Row(
                  //     mainAxisAlignment: MainAxisAlignment.spaceAround,
                  //     children: [
                  //       BadgeWidget(label: '758', icon: Icons.star),
                  //       BadgeWidget(label: 'VIP', icon: Icons.star),
                  //       BadgeWidget(label: 'LV 6', icon: Icons.grade),
                  //     ],
                  //   ),
                  // ),
                  const SizedBox(height: 10),
                  // 兴趣爱好
                  const Padding(
                    padding: EdgeInsets.symmetric(horizontal: 10.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('兴趣爱好', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                        SizedBox(height: 10),
                        Wrap(
                          spacing: 8,
                          children: [
                            Chip(label: Text('爱需要勇气和坚持')),
                            Chip(label: Text('宅男')),
                            Chip(label: Text('选择恐惧症')),
                            Chip(label: Text('天然呆')),
                            Chip(label: Text('小清新')),
                            Chip(label: Text('轻音乐')),
                            Chip(label: Text('背包客')),
                            Chip(label: Text('三好学生')),
                          ],
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 20),
                  // 精选照片
                  const Padding(
                    padding: EdgeInsets.symmetric(horizontal: 20.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('精选照片', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                        Icon(Icons.arrow_forward_ios), // 导航到更多照片
                      ],
                    ),
                  ),
                  const SizedBox(height: 10),
                  // 照片缩略图
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 20.0),
                    child: GridView.count(
                      shrinkWrap: true, // 确保GridView仅占据所需空间
                      physics: const NeverScrollableScrollPhysics(), // 禁止GridView内部滚动
                      crossAxisCount: 3,
                      childAspectRatio: 1.0,
                      children: [
                        Image.asset('images/1.jpg', fit: BoxFit.cover),
                        Image.asset('images/2.jpg', fit: BoxFit.cover),
                        Image.asset('images/3.jpg', fit: BoxFit.cover),
                        Image.asset('images/4.jpg', fit: BoxFit.cover),
                        Image.asset('images/5.jpg', fit: BoxFit.cover),
                        Image.asset('images/6.jpg', fit: BoxFit.cover),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          // 固定在底部的按钮
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              color: Colors.white,
              padding: const EdgeInsets.symmetric(vertical: 12.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  ElevatedButton(onPressed: () {}, child: const Text('个性名片')),
                  ElevatedButton(onPressed: () {}, child: const Text('编辑资料')),
                  ElevatedButton(onPressed: () {}, child: const Text('发送消息')),
                ],
              ),
            ),
          ),
        ],
      )
    );
  }
}


